<template>
  <div class="page-container">
    <div>
      <el-card style="margin-bottom: 60px">
        <div slot="header" class="clearfix">
          <div class="heder-left">
            <el-button @click="back" icon="el-icon-arrow-left">返回</el-button>
            <span style="margin-left: 10px">{{ ruleForm.id ? '编辑项目' : '新增项目' }}</span>
          </div>
        </div>
        <el-form
          :model="ruleForm"
          style="width: 100%; margin-bottom: 30px"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          class="demo-ruleForm"
          inline
        >
          <div class="flex">
            <el-form-item label="项目名称" prop="project_name" style="width: 66%">
              <el-input v-model="ruleForm.project_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="项目进度" prop="project_progress_status" style="width: 33%">
              <el-select style="width: 100%" v-model="ruleForm.project_progress_status" placeholder="请选择">
                <el-option
                  v-for="(item, index) in projectProgressList"
                  :key="index"
                  :label="item.para_name"
                  :value="item.id"
                  >{{ item.para_name }}</el-option
                >
              </el-select>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="所属区域" prop="selectedArea" style="width: 33%">
              <el-cascader
                ref="areaData"
                :options="areaData"
                style="width: 100%"
                v-model="ruleForm.selectedArea"
                placeholder="请选择省市区"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="详细地址" prop="address" style="width: 66%">
              <el-input v-model="ruleForm.address" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="施工许可证号" prop="xkz" style="width: 33%">
              <el-input v-model="ruleForm.xkz" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="项目分类" prop="type_id" style="width: 33%">
              <el-select style="width: 100%" v-model="ruleForm.type_id" placeholder="请选择">
                <el-option
                  v-for="(item, index) in projectTypeList"
                  :key="index"
                  :label="item.type_name"
                  :value="item.id"
                  >{{ item.type_name }}</el-option
                >
              </el-select>
            </el-form-item>
            <el-form-item label="项目联系人" prop="link_username" style="width: 33%">
              <el-input v-model="ruleForm.link_username" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="项目联系人电话" prop="link_mobile" style="width: 33%">
              <el-input v-model="ruleForm.link_mobile" maxlength="11" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="开工日期" prop="start_time" style="width: 33%">
              <el-date-picker
                v-model="ruleForm.start_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="竣工日期" prop="end_time" style="width: 33%">
              <el-date-picker
                v-model="ruleForm.end_time"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                type="date"
                style="width: 100%"
                placeholder="选择日期"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="施工单位" prop="build_name" style="width: 33%">
              <el-input v-model="ruleForm.build_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="技术负责人" prop="build_username" style="width: 33%">
              <el-input v-model="ruleForm.build_username" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="技术负责人电话" prop="build_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.build_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="建设单位" prop="construct_name" style="width: 33%">
              <el-input v-model="ruleForm.construct_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="建设单位负责人" prop="construct_username" style="width: 33%">
              <el-input v-model="ruleForm.construct_username" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="建设单位负责人电话" prop="construct_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.construct_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="监理单位" prop="supervisor_name" style="width: 33%">
              <el-input v-model="ruleForm.supervisor_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="总监理工程师" prop="supervisor_username" style="width: 33%">
              <el-input v-model="ruleForm.supervisor_username" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="总监理工程师电话" prop="supervisor_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.supervisor_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="勘查单位" prop="survey_name" style="width: 33%">
              <el-input v-model="ruleForm.survey_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="勘查单位负责人" prop="survey_username" style="width: 33%">
              <el-input
                v-model="ruleForm.survey_username"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
            <el-form-item label="勘查单位负责人电话" prop="survey_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.survey_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item label="设计单位" prop="design_name" style="width: 33%">
              <el-input v-model="ruleForm.design_name" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设计单位负责人" prop="design_username" style="width: 33%">
              <el-input v-model="ruleForm.design_username" style="width: 100%" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item label="设计单位负责人电话" prop="design_mobile" style="width: 33%">
              <el-input
                v-model="ruleForm.design_mobile"
                maxlength="11"
                style="width: 100%"
                placeholder="请输入"
              ></el-input>
            </el-form-item>
          </div>
          <div class="title">
            <span>项目地址</span>
          </div>
          <div class="flex">
            <span>经度：{{ ruleForm.lng }}</span>
            <span style="margin-left: 15px">纬度：{{ ruleForm.lat }}</span>
          </div>
          <div class="map">
            <el-amap :zoom="zoom" :center="center" class="amap-demo" @init="mapInit" @click="mapClick">
              <el-amap-search-box
                placeholder="请输入关键字"
                :debounce="1000"
                @select="selectPoi"
                @choose="choosePoi"
              ></el-amap-search-box>
              <el-amap-marker
                v-for="(marker, index) in markers"
                :key="index"
                :position="marker.position"
              ></el-amap-marker>
            </el-amap>
          </div>
        </el-form>
      </el-card>
      <!-- 固定定位的保存按钮 -->
<!--      <div class="fixed-save-btn">-->
<!--        <el-button type="primary" @click="submitForm('ruleForm')" size="large">保存</el-button>-->
<!--      </div>-->
      <div class="footer">
        <el-button @click="back">关闭</el-button>
        <el-button type="primary" size="medium" @click="submitForm('ruleForm')">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { dateFormat } from '../../libs/util';
import { regionData } from 'element-china-area-data';
import { Parameterlist, ProjectSave, ProjectInfo } from '@/api/manage';
import { projectTypeList } from '@/api/project';

export default {
  name: 'addCourseware',
  data() {
    // 自定义手机号校验规则
    const validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入手机号'));
      } else {
        // 简单的中国大陆手机号正则表达式
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的手机号'));
        }
      }
    };
    const validatePhone1 = (rule, value, callback) => {
      if (!value) {
        return callback();
      } else {
        // 简单的中国大陆手机号正则表达式
        const reg = /^1[3456789]\d{9}$/;
        if (reg.test(value)) {
          callback();
        } else {
          callback(new Error('请输入正确的手机号'));
        }
      }
    };
    return {
      zoom: 14,
      center: [114.502464, 38.045474],
      markers: [],
      searchContent: '',
      areaData: regionData,
      ruleForm: {
        project_name: '',
        project_progress_status: '',
        province_id: '',
        province_name: '',
        city_id: '',
        city_name: '',
        area_id: '',
        area_name: '',
        type_id: '',
        link_username: '',
        xkz: '',
        lxr: '',
        link_mobile: '',
        start_time: '',
        end_time: '',
        build_name: '',
        build_username: '',
        build_mobile: '',
        construct_name: '',
        construct_username: '',
        construct_mobile: '',
        supervisor_name: '',
        supervisor_username: '',
        supervisor_mobile: '',
        survey_name: '',
        survey_username: '',
        survey_mobile: '',
        design_name: '',
        design_username: '',
        design_mobile: '',
        lat: '',
        lng: '',
        selectedArea: [],
        address: '',
      },
      rules: {
        project_name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        project_progress_status: [{ required: true, message: '请选择项目进度', trigger: 'change' }],
        selectedArea: [{ required: true, message: '请选择所属区域', trigger: 'change' }],
        type_id: [{ required: true, message: '请选择项目分类', trigger: 'change' }],
        address: [{ required: true, message: '请输入详细地址', trigger: 'blur' }],
        link_username: [{ required: true, message: '请输入项目联系人', trigger: 'blur' }],
        link_mobile: [{ required: true, message: '请输入项目联系人电话', trigger: 'blur' },
        { validator: validatePhone, trigger: 'blur' }
        ],
        build_mobile:[{ validator: validatePhone1, trigger: 'blur' }],
        design_mobile:[{ validator: validatePhone1, trigger: 'blur' }],
        survey_mobile:[{ validator: validatePhone1, trigger: 'blur' }],
        construct_mobile:[{ validator: validatePhone1, trigger: 'blur' }],
        supervisor_mobile:[{ validator: validatePhone1, trigger: 'blur' }],
        xkz: [],
      },
      projectProgressList: [],
      projectTypeList: [],
      map: null,
    };
  },
  computed: {},
  created() {},
  mounted() {
    
    this.getParameter();
	  this.getProjectType();
    if (this.$route.query.id) {
      this.ruleForm.id = this.$route.query.id;
      this.getInfo();
    }
    // this.initMap();
  },
  methods: {
    // 获取详情
    getInfo() {
      ProjectInfo({ id: this.$route.query.id }).then((res) => {
        this.ruleForm = res.data.info;
        this.center = [res.data.info.lng, res.data.info.lat];
        this.markers = [
          {
            position: [res.data.info.lng, res.data.info.lat],
            icon: 'http://api.map.baidu.com/img/markers.png',
          },
        ];
        this.ruleForm.selectedArea = [
          String(this.ruleForm.province_id),
          String(this.ruleForm.city_id),
          String(this.ruleForm.area_id),
        ];
        console.log(this.ruleForm.selectedArea);
      });
    },
    mapInit(o) {
      this.map = o;
    },
    mapClick(e) {
      this.ruleForm.lng = e.lnglat.lng;
      this.ruleForm.lat = e.lnglat.lat;
      this.markers = [
        {
          position: [e.lnglat.lng, e.lnglat.lat],
          icon: 'http://api.map.baidu.com/img/markers.png',
        },
      ];
    },
    selectPoi(e) {
      console.log('selectPoi: ', e);
      if (e.poi.location) {
        this.map.setCenter([e.poi.location.lng, e.poi.location.lat]);
        this.ruleForm.lng = e.poi.location.lng;
        this.ruleForm.lat = e.poi.location.lat;
        this.markers = [
          {
            position: [e.poi.location.lng, e.poi.location.lat],
            icon: 'http://api.map.baidu.com/img/markers.png',
          },
        ];
      }
    },
    choosePoi(e) {
      console.log('choosePoi: ', e);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (!this.ruleForm.lng || !this.ruleForm.lat) {
            this.$message.error('请选择经纬度！');
            return false;
          }
          let area = this.$refs.areaData.getCheckedNodes()[0];
          this.ruleForm.province_id = area.path[0];
          this.ruleForm.province_name = area.pathLabels[0];
          this.ruleForm.city_id = area.path[1];
          this.ruleForm.city_name = area.pathLabels[1];
          this.ruleForm.area_id = area.path[2];
          this.ruleForm.area_name = area.pathLabels[2];
          ProjectSave(this.ruleForm).then((res) => {
            this.$message.success(this.ruleForm.id ? '修改成功' : '添加成功');
            this.back();
          });
        } else {
          this.$message.error('请正确填写！');
          return false;
        }
      });
    },
    initMap() {
      // 初始化地图
      const center = new TMap.LatLng(39.98412, 116.307484);
      this.map = new TMap.Map('tmap', {
        center: center,
        zoom: 12,
        pitch: 0,
        rotation: 0,
      });

      // 添加控件
      // this.map.addControl(new TMap.Control.Zoom());
      // this.map.addControl(new TMap.Control.Scale());

      // 点击地图事件
      this.map.on('click', (evt) => {
        this.$message.success(`点击位置: ${evt.latLng.getLat()}, ${evt.latLng.getLng()}`);
        this.addMarker(evt.latLng);
      });
    },
    addMarker(position) {
      // 先清除所有标记
      this.clearMarkers();

      // 创建标记
      const marker = new TMap.MultiMarker({
        map: this.map,
        geometries: [
          {
            position: position,
            id: 'marker_' + Date.now(),
            content: '<div class="marker-icon"></div>',
          },
        ],
      });

      this.markers.push(marker);
    },

    clearMarkers() {
      this.markers.forEach((marker) => {
        marker.setMap(null);
      });
      this.markers = [];
    },

    back() {
      this.$router.back();
    },
	getProjectType()
	{
		projectTypeList({}).then((res)=>{
			 this.projectTypeList = res.data.list;
		})
	} ,
	
    getParameter() {
      Parameterlist({
        type: 2,
      }).then((res) => {
         this.projectProgressList = res.data;
      });
    },
  },
};
</script>

<style scoped>
.title {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.title > span {
  font-size: 14px;
  color: #000;
  font-weight: bold;
}
.flex {
  width: 100%;
  display: flex;
  align-items: center;
}
.footer {
  width: 100%;
  height: 60px;
  position: fixed;
  bottom: 0px;
  left: 0;
  z-index: 9;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 210px;
  border-top: 1px solid #e6e6e6;
}
.demo-ruleForm /deep/ .el-form-item {
  display: flex;
  align-items: center;
}
.demo-ruleForm /deep/ .el-form-item__content {
  width: 100%;
}
.demo-ruleForm /deep/ .el-form-item__label {
  flex-shrink: 0;
}
.marker-icon {
  width: 20px;
  height: 20px;
  background-color: #409eff;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.map {
  width: 100%;
  margin-top: 10px;
  position: relative;
}
.search_content {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}
.clearfix {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.amap-demo {
  height: 500px;
}
.page-container {
  position: relative;
  min-height: 100vh;
  padding-bottom: -1px;
}
.fixed-save-btn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>
